<template>
    <div class="app-container">
      <el-row class="card-box">
          <el-card>
            <div slot="header">
              <span><i class="el-icon-coffee-cup"></i> 资源信息单情况</span>
            </div>
            .<div class="el-table el-table--enable-row-hover el-table--medium">
              <el-col :span="12" class="card-box">
         <el-card>
           <div slot="header"><span><i class="el-icon-pie-chart"></i>资源信息单每天监控情况</span></div>
           <div class="el-table el-table--enable-row-hover el-table--medium">
            <div>
             <div ref="chart1" style="width: 800px; height: 600px;"></div>
            </div>
             <div ref="commandstats" style="height: 420px" />
           </div>
         </el-card>
       </el-col>

       <el-col :span="12" class="card-box">
         <el-card>
           <div slot="header"><span><i class="el-icon-pie-chart"></i> 企业资源调度成功单数排行榜</span></div>
           <div class="el-table el-table--enable-row-hover el-table--medium">
            <div>
             <div ref="chart2" style="width: 800px; height: 600px;"></div>
            </div>
             <div ref="commandstats" style="height: 800px" />
           </div>
         </el-card>
       </el-col>
              <div ref="commandstats" style="height: 600px" />
            </div>
          </el-card>
     </el-row>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
 
  export default {
   mounted() {
     this.renderChart();
     this.initChart1();
     
   },
   methods: {
  
     renderChart() {
       const chartDom = this.$refs.chart2;
       const myChart = echarts.init(chartDom);
 
       const data = [];
        for (let i = 0; i < 6; ++i) {
          data.push(Math.round(Math.random() * 20));
        } 
        const option = {
          xAxis: {
            max: 'dataMax'
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              fontSize: '12',
            },
            data: ['宁德时代', '潍柴动力', '澳洲力拓集团', '派能科技', '理想汽车','比亚迪'],
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300,
            max: 5 // only the largest 3 bars will be displayed
          },
          series: [
            {
              realtimeSort: true,
              name: '资源信息单成功数量',
              type: 'bar',
              data: data,
              label: {
                show: true,
                position: 'right',
                valueAnimation: true
              }
            }
          ],
          legend: {
            show: true
          },
          animationDuration: 0,
          animationDurationUpdate: 3000,
          animationEasing: 'linear',
          animationEasingUpdate: 'linear'
        };
        function run() {
          for (var i = 0; i < data.length; ++i) {
            if (Math.random() > 0.9) {
              data[i] += Math.round(Math.random() * 2000);
            } else {
              data[i] += Math.round(Math.random() * 200);
            }
          }
        myChart.setOption({
          series: [
            {
              type: 'bar',
              data
            }
          ]
        });
      }
        setTimeout(function () {
          run();
        }, 0);
        setInterval(function () {
          run();
        }, 3000);

        option && myChart.setOption(option);
     },
     initChart1(){
       const chartDom = this.$refs.chart1;
       const myChart1 = echarts.init(chartDom);
 
       const option = {
 
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['已成功', '未调度', '调度失败']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '已成功',
      type: 'line',
     // stack: 'Total',
      data: [100, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '未调度',
      type: 'line',
     // stack: 'Total',
      data: [200, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '调度失败',
      type: 'line',
      //stack: 'Total',
      data: [30, 22, 23, 13, 19, 33, 11]
    }
  ]
};
       option && myChart1.setOption(option);
     
     }
   }
 };
 </script>
 
